<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>生鲜商城</title>
    <!-- 引入样式 -->
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/jquery.js"></script>
</head>
<body>
<el-container id="app">
    <el-header style="height:510px">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
        >
            <div class="demo-image">
                <div class="block" :key="img.headbg">
                    <el-image
                            style="width: 1920px; height: 440px"
                            :src="img.headbg"
                            :fit="img.headbg">
                    </el-image>
                </div>
            </div>
            <el-menu-item index="11">首页</el-menu-item>
            <el-menu-item index="22">商品</el-menu-item>
            <el-menu-item index="33">限时秒杀</el-menu-item>
            <el-menu-item index="44">领券中心</el-menu-item>
            <el-menu-item index="55">
                <a href="/loginAndRegister" target="_blank" v-if="user.userName=='' "  style="text-decoration: none">登录/注册</a>
                <a href="/myCenter" v-if="user.userName != '' " v-text="user.userName" style="color: #ED2553;text-decoration: none">{{user.userName}}</a>
                <a href="/shoppingCart" v-if="user.userName != '' " class="el-icon-shopping-cart-1"  style="color: #ED2553;text-decoration: none"></a>
            </el-menu-item>
            <el-menu-item index="66">
                <a href="javascript" target="_blank" v-if="user.userName==''"></a>
                <a href="/logout" v-else v-text="logout" style="text-decoration: none">{{logout}}</a>
            </el-menu-item>
        </el-menu>
        <div class="line"></div>
    </el-header>
    <el-main>
        <!--个人中心-->
        <el-tabs :tab-position="tabPosition">
            <el-tab-pane label="账户充值">
                <div>
                    <label>当前余额</label>
                    <label>{{user.userMoney}}</label>
                </div>
                <div>
                    <label>剩余积分</label>
                    <label>{{user.userScore}}</label>
                </div>

                <el-button type="text" @click="dialogFormVisible = true">去充值</el-button>

                <el-dialog title="账户余额充值" :visible.sync="dialogFormVisible">
                    <el-form :model="form"  method="post">
                        <form action="/pay" method="post">

                        <input type="text" name="userMoney" placeholder="请输入金额">
                              <!--  <el-input type="text" name="userMoney" ></el-input>-->


                            <input type="submit" style="margin-right: 0" value="去充值"/>
                        </form>
                    </el-form>

                </el-dialog>
            </el-tab-pane>

            <!--查看个人订单-->

            <el-tab-pane label="个人订单查看" >

                <el-form :inline="true" :model="selectOrder" class="demo-form-inline">
                    <el-form-item label="查看个人订单">
                        <el-select v-model="selectOrder.ordersStatus" @change="chioceOrderStatus" placeholder="请选择">
                            <el-option label="未支付" value="未支付"></el-option>
                            <el-option label="已支付" value="已支付"></el-option>
                            <el-option label="已提货" value="已提货"></el-option>
                            <el-option label="已退货" value="已退货"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>

                    <el-table
                            :data="tableData"
                            border

                            style="width: 100%">
                        <el-table-column
                                prop="ordersId"
                                label="订单编号"
                                width="100"
                               >
                        </el-table-column>
                        <el-table-column
                                prop="ordersTotalprice"
                                label="总价"
                                width="100"
                                >
                        </el-table-column>
                        <el-table-column
                                prop="ordersTotalpriceActual"
                                width="100"
                                label="实付总价">
                        </el-table-column>
                        <el-table-column
                                prop="ordersPickupPhone"
                                label="提货联系电话">
                        </el-table-column>
                        <el-table-column
                                prop="ordersPickupAddress"
                                label="提货点">
                        </el-table-column>
                        <el-table-column
                                prop="ordersPickupTime"
                                label="提货时间">
                        </el-table-column>
                        <el-table-column
                                prop="ordersPickupTimeActual"
                                label="实际提货时间">
                        </el-table-column>

                        <el-table-column
                                prop="ordersStatus"
                                label="订单状态">
                        </el-table-column>
                        <el-table-column
                                align="right">

                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="success"
                                        @click="handleClick(scope.row)"
                                         v-if="selectOrder.ordersStatus=='未支付' ">去支付</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleClick(scope.row)"
                                         v-if="selectOrder.ordersStatus=='已支付' ">退货</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleClick(scope.row)"
                                         v-if="selectOrder.ordersStatus=='已提货' ">退货</el-button>
                                <a v-if="selectOrder.ordersStatus=='已退货'"></a>
                                <!--@cell-click="clickAddress"-->
                                <el-button
                                        size="mini"
                                        type="success"
                                        @click="handleGoods(scope.row)">查看提货点</el-button>
                            </template>
                        </el-table-column>

                    </el-table>

                <!--分页-->
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :current-page="pageIndex"
                        :total="pageCount" :page-size="pageSize"
                        @current-change="jump"
                >
                </el-pagination>


            </el-tab-pane>

            <!--查看领取的优惠券-->
            <el-tab-pane label="已领取的优惠券">

                <el-form :inline="true" :model="formSelect" class="demo-form-inline">
                    <el-form-item label="优惠券类型">
                        <el-select v-model="formSelect.couponStatus" @change="chioce" placeholder="请选择">
                            <el-option label="直接发放" value="直接发放"></el-option>
                            <el-option label="积分兑换" value="积分兑换"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>


                <!--直接发放-->
                <el-col :span="8"  style="width:400px;margin-left: 70px; margin-top: 30px;" v-for="item in direct" v-if="formSelect.couponStatus=='直接发放' ">
                    <el-card :body-style="{ padding: '0px' }">
                        <!--https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3218359211,2016981492&fm=26&gp=0.jpg券-->
                        <!-- https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2293149804,100687870&fm=26&gp=0.jpg折-->
                        <!--https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1325239700,4029398801&fm=26&gp=0.jpg ￥-->
                        <img style="width:100%;margin:0 auto" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3218359211,2016981492&fm=26&gp=0.jpg" class="image">
                        <div style="padding: 20px;">
                            <span style="font-size: 20px;color: red;font-weight: bold" v-if="item.couponDiscountsStatus == '直扣'" >{{symbolOne}}</span>
                            <span style="font-size: 40px;color: red;font-weight: bold"  >{{item.couponDiscount}}</span>
                            <span style="font-size: 20px;color: red;font-weight: bold" v-show = "item.couponDiscountsStatus == '折扣'">{{symbolTwo}}</span>
                            <div><span class="time">满</span>
                                <span >{{item.couponThreshold}}</span>
                                <span class="time">元可用</span></div>
                            <div class="bottom clearfix">
                                <time class="time" style="line-height: 50px;font-size: 16px" >
                                    {{item.couponName}}</time><span>券</span>
                                <!--<el-button class="button" @click="toUseDirect(item)"  plain style="margin-right: 0px">去使用</el-button>-->
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <time class="time" style="margin-right: 0px">{{item.couponPastdue}}</time><span>到期</span>
                            </div>
                        </div>
                    </el-card>
                </el-col>


                <!--积分兑换-->

                <el-col :span="8"  style="width:400px;margin-left: 70px; margin-top: 30px;" v-for="item in score" v-show="formSelect.couponStatus=='积分兑换' ">
                    <el-card :body-style="{ padding: '0px' }" >
                        <img style="width:100%;text-align: center" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1325239700,4029398801&fm=26&gp=0.jpg" class="image">
                        <div style="padding: 20px;">
                            <span style="font-size: 20px;color: red;font-weight: bold" v-if="item.couponDiscountsStatus == '直扣'" >{{symbolOne}}</span>
                            <span style="font-size: 40px;color: red;font-weight: bold" >{{item.couponDiscount}}</span>
                            <span style="font-size: 20px;color: red;font-weight: bold" v-show = "item.couponDiscountsStatus == '折扣'">{{symbolTwo}}</span>

                            <div><span class="time">无门槛券</span></div>
                            <div class="bottom clearfix">
                                <time class="time" style="line-height: 50px;font-size: 16px">{{item.couponName}}</time><span>积分兑换券</span>
                                <!--<el-button class="button" @click="toUseScore(item)" plain >去使用</el-button>-->

                                <time class="time" style="float: right;padding-bottom: 0px">{{item.couponPastdue}}到期</time>
                            </div>
                        </div>
                    </el-card>
                </el-col>

            </el-tab-pane>

        </el-tabs>
    </el-main>
</el-container>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            activeIndex: "11",
            productType: [],
            tabPosition: 'left',
            dialogFormVisible: false,
            isLogin:false,
            form: {
                userId: '',
                userMoney:'',
                type: [],
            },
            symbolOne:'￥',
            symbolTwo:'折',
            formLabelWidth: '120px',
            img: {
                headbg: '/img/bg/banner3.jpg',
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
            },
            user:{
                userId:'',
                userName:'',
                userScore:'',
                userMoney:'',
            },
            logout:'退出登录',
            //用户个人订单
            tableData:[],
            //订单状态
            options:[],
            orders:{
                ordersId:'',
                userId:'',
                ordersStatus:'',
                ordersTotalprice:'',
                ordersTotalpriceActual:'',
                ordersPickupPhone:'',
                ordersPickupAddress:'',
                ordersPickupTime:'',
                ordersPickupTimeActual:'',
            },
            //分页
            pageCount:0,
            pageIndex:1,
            pageSize:0,
            selectOrder:{
                userId:'',
                ordersStatus:'',
            },
            //优惠券查看
            formSelect:{
                userId:'',
                couponStatus:'',
            },
            /*直接发放*/
            direct:[],
            /*积分兑换券*/
            score:[],
        },
        methods: {
            handleSelect: function (key, keyPath) {
                if(key==11){
                    window.location.href="/"
                }else if(key==22){
                    window.location.href="/toProduct"
                }else if(key==33){
                    window.open("/KillProduct")
                }else if(key==44){
                    window.location.href="/couponCenter"
                }
            },

            //用户订单详情查询
            doPageQueryOrders:function(selectOrders){
                let vs = this;
                $.ajax({
                    url:"/freshmarket/orders/selectPersonOrders",
                    type:"get",
                    dataType:"json",
                    data:selectOrders,
                    success:function(resp){
                        console.log(resp);
                        if(resp.success){
                            //页面数据
                            vs.tableData = resp.content;
                            //总条数
                            vs.pageCount=resp.pageCount;
                            console.log("总条数"+vs.pageCount);
                            //当前页
                            vs.pageIndex = resp.pageIndex;
                            //每页显示的条数
                            vs.pageSize=resp.pageSize;
                        }

                    }
                });
            },
            jump:function(pageIndex){
                console.log(pageIndex);
                let vs = this;
                let od = vs.orders;
                var selectOrders={userId:od.userId,ordersStatus:od.ordersStatus,pageIndex:pageIndex};
                //向后端发送请求
                this.doPageQueryOrders(selectOrders);
            },
            /*去支付*/
            handleClick:function(row){
                console.log(row);
                console.log("订单id:"+row.ordersId + "订单状态："+row.ordersStatus);
                if(row.ordersStatus == '未支付'){
                    var toPay = {ordersId:row.ordersId}
                    $.ajax({
                        url:"/freshmarket/orders/payOrders",
                        type:"post",
                        dataType:'json',
                        data:toPay,
                        success:function(data){
                            console.log(data);
                            if(data.success){
                                localStorage.setItem("address",row.ordersPickupAddress);
                                window.location.href="/naviMap";
                            }
                        }
                    });

                }else if(row.ordersStatus == '已支付'){
                    //退货
                    var toRollBack = {ordersId:row.ordersId};
                    $.ajax({
                        url:"/freshmarket/orders/rollbackOrders",
                        type:"post",
                        dataType:'json',
                        data:toRollBack,
                        success:function(data){
                            console.log(data);
                            if(data.success){
                                window.location.href="/myCenter";
                            }
                        }
                    });
                }else if(row.ordersStatus == '已提货'){
                    //退货
                    var toRollBack = {ordersId:row.ordersId};
                    $.ajax({
                        url:"/freshmarket/orders/rollbackOrders",
                        type:"post",
                        dataType:'json',
                        data:toRollBack,
                        success:function(data){
                            console.log(data);
                            if(data.success){
                                window.location.href="/myCenter";
                            }
                        }
                    });
                }

            },

            handleGoods:function(row){

                localStorage.setItem("address",row.ordersPickupAddress);
                window.location.href="/naviMap";
            },
            //查询个人订单
            chioceOrderStatus:function(){
                let vs = this;
                let od = vs.selectOrder;
                var selectOrders={ordersStatus:od.ordersStatus};
                this.doPageQueryOrders(selectOrders);
            },

            pay:function(){

           },
            resales:function(){

            },
            //查询优惠券
            chioce:function(){
                let vs = this;
                var condition={couponStatus: vs.formSelect.couponStatus};
                $.ajax({
                    url:"/freshmarket/coupon/selectByIdCoupon",
                    type:"get",
                    data:condition,
                    dataType:'json',
                    success:function(data){
                        console.log(data);
                        if(data.success && vs.formSelect.couponStatus=='直接发放'){

                            vs.direct = data.data;
                        }else if(data.success && vs.formSelect.couponStatus=='积分兑换'){
                            vs.score = data.data;
                        }

                    }
                });
            },
            //使用直接发放券
            toUseDirect:function(item){
                console.log(item);
            },
            //使用积分兑换券
            toUseScore:function(item){
                console.log(item);
            },

        },
        mounted: function () {
            var vm = this;
            //登录注册
           /* $.ajax({
                url:"/freshmarket/user/islogin",
                type:"get",
                success:function(data){
                    console.log(data);
                    if(data.data){
                    vm.user = data.data;
                    console.log(vm.user.userId);

                    }

                }
            });*/
            //查询用户信息

            $.ajax({
                url:"/freshmarket/user/selectUser",
                type:"get",
                dataType:'json',
                success:function(data){
                    console.log(data);
                    if(data.data){
                        vm.user = data.data;
                    }

                }
            });

            //查询订单
            if(this.user.userId != ''){
                this.doPageQueryOrders({userId:this.user.userId});
            }


        },
    });
</script>
</body>
</html>
